<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn">按钮</button>
  <script>
    // 之前的
    btn.onclick = function () {
      console.log('点击的按钮')
    }
    // 期望的
    btn.onclick = throttle(function () {
      console.log('点击的按钮', new Date().getSeconds()  ) // new Date().getSeconds() 获取到当前的秒
    })
    // 分析过程
    // btn.onclick = function () {} // 原来每次点击都会执行这个函数
    // 此时经过节流函数之后,等号右侧应该放一个函数
    // 现在放的是一个函数调用表达式,这个表达式的值是函数的返回值
    // 由此可得,throttle 返回值一定是一个函数
    // btn.onclick = throttle()

    // 节流,给点击事件的回调函数节流
    function throttle (fn, delay = 1000) {
      let flag = false;
      // 初始化一个标识,这个标识用来标记是否允许再次执行定时器
      // 当这个标识是false的时候,允许去创建定时器执行
      // 当这个标识是true的时候,不允许创建定时器
      //    而fn就在定时器中去执行的
      return function() {
        if (flag) {
          return
        }
        flag = true; // 标记,创建定时器了
        setTimeout(() => {
          fn()
          flag = false;
        }, delay)
      }
    }



  </script>
</body>
</html>